import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Column } from '@ant-design/plots';
import { qryPaymentTxStats } from '../services';
import { Card, Radio } from 'antd';

const TotalTransactions = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    asyncFetch(7);
  }, []);

  // 获取图表数据
  const asyncFetch = async (amount: number) => {
    let data = await qryPaymentTxStats({ amount: amount })
    console.log(data);

    if (data) {
      let cadTotalData = data.body.map((item: any) => {
        return {
          date: item.date,
          value: item.cadTotal,
          type: '法币交易总金额'
        }
      })
      let pdbTotalData = data.body.map((item: any) => {
        return {
          date: item.date,
          value: item.pdbTotal,
          type: '和平币交易总金额'
        }
      })
      setData([...pdbTotalData, ...cadTotalData])
    }
  };

  // 时间选择
  const showInfo = (e: any) => {
    Number(e.target.value);
    asyncFetch(Number(e.target.value))
  }
  const config = {
    data,
    height: 240,
    isStack: true,
    xField: 'date',
    yField: 'value',
    seriesField: 'type',
    legend: {
      position: 'top'
    },
    yAxis: {
      title: {
        text: 'CAD/10k',
        spacing: 6
      },
    },
    label: {
      // 可手动配置 label 数据标签位置
      position: 'middle',
      // 'top', 'bottom', 'middle'
      // 可配置附加的布局方法
      layout: [
        // 柱形图数据标签位置自动调整
        {
          type: 'interval-adjust-position',
        },
        // 数据标签防遮挡
        {
          type: 'interval-hide-overlap',
        },
        // 数据标签文颜色自动调整
        {
          type: 'adjust-color',
        },
      ],
    },
  };

  return <Card bodyStyle={{ padding: '4px 24px 24px' }}>
    <div className="rangeTimeSelect">
      <p className="formTitle">交易总量看板</p>
      <Radio.Group
        defaultValue="7"
        buttonStyle="solid"
        onChange={showInfo}
      >
        <Radio.Button value="7">近七天</Radio.Button>
        <Radio.Button value="30">近30天</Radio.Button>
      </Radio.Group>
    </div>
    <Column {...config} />
  </Card>
}
export default TotalTransactions